<template>
	<view class="content">
		<view class="code-plate-box">
			<view class="user-head-box flex-c-c">
				<image :src="userInfo.avatar" mode=""></image>
				<text>{{ userInfo.nickname }}</text>
			</view>
			<view class="code-box flex-c-c">
				<image :src="userInfo.code" mode=""></image>
			</view>
		</view>
		<view class="bottom-but-box flex-c-c">
			<view class="share-code-but-box">
				<button open-type="share">分享二维码</button>
			</view>
			<!-- <image class="code-image" :src="poster" mode=""></image> -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="hold-code-but-box" @click="saveImgToLocal"><text>保存二维码</text></view>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<view v-if="openSettingBtnHidden" class="hold-code-but-box" @click="saveEwm">
				保存二维码
			</view>
			<button v-else class="hold-code-but-box" hover-class="none" open-type="openSetting"
				@opensetting='handleSetting'>保存二维码</button>
			<!-- #endif -->
		</view>
		<!-- <l-painter :board="base" @success="IsOk" type style="position: fixed;right: 999px;" :pixel-ratio='2' isRenderImage /> -->
	</view>
</template>

<script>
	// import lPainter from '@/components/lime-painter/index.vue'
	export default {
		// components: {
		// 	lPainter
		// },
		data() {
			return {
				userInfo: {}, // 用户基本信息
				openSettingBtnHidden: true, //是否授权
				base: {},
				poster: "",
				qrCode: "../static/icon1.png",
				pathUrl: "../../static/member_icon/icon12.png",
				name: '葡萄成熟时9959'
			}
		},
		onLoad() {
			// this.draw();
			console.log(uni.getStorageSync('userInfo'))
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			//微信小程序保存到相册
			handleSetting(e) {
				if (!e.detail.authSetting['scope.writePhotosAlbum']) {
					this.openSettingBtnHidden = false;
				} else {
					this.openSettingBtnHidden = true;
				}
			},
			saveEwm(e) {
				//获取相册授权
				let _this = this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									//这里是用户同意授权后的回调
									_this.saveImgToLocal();
								},
								fail() { //这里是用户拒绝授权后的回调
									_this.openSettingBtnHidden = false
								}
							})
						} else { //用户已经授权过了
							_this.saveImgToLocal();
						}
					}
				})
			},
			saveImgToLocal() {
				uni.showModal({
					title: "确定保存图片吗",
					showCancel: true,
					success: res => {
						if (res.confirm) {
							const {
								code: src
							} = this.userInfo
							uni.getImageInfo({
								src,
								success: (res) => {
									uni.saveImageToPhotosAlbum({
										filePath: res.path,
										success() {
											uni.showToast({
												title: "保存成功",
												icon: "success"
											})
										}
									})
								}
							})
						}
					}
				})
			},
			draw() {
				let _this = this;
				_this.base = {
					width: '750rpx',
					height: '1000rpx',
					views: [{
							type: "image",
							src: _this.pathUrl,
							css: {
								width: '170rpx',
								height: '150rpx',
								left: '50%',
								transform: 'translateX(-50%)'
							}
						},
						{
							type: "text",
							text: _this.name,
							css: {
								left: '50%',
								top: '18%',
								transform: 'translate(-50%,-18%)',
								fontSize: '40rpx'
							}
						},
						{
							type: "image",
							src: _this.qrCode,
							css: {
								width: '600rpx',
								height: '600rpx',
								left: '50%',
								top: '70%',
								transform: 'translate(-50%,-70%)'
							}
						}
					]
				}
			},
			// 当前图片
			IsOk(e) {
				this.poster = e;
			}
		},
		//将onShareAppMessage放在methods方法外,只能触发button标签
		onShareAppMessage(option) {
			console.log(option)
			const {
				uid,
			} = this.userInfo
			console.log(uid)
			return {
				path: `/pages/index/index?scene=${uid}`,
				// imageUrl,
			}
			// let _this = this
			// if (opt.from === 'button') {
			// 	// 来自页面内转发按钮
			// 	console.log(opt.target)
			// }
			// return {
			// 	title: '分享给好友', //分享标题
			// 	path: `/pages/index/index`, //点击分享消息是打开的页面
			// 	imageUrl: this.code, //图片路径
			// 	success: function(res) {
			// 		// 转发成功
			// 		console.log("转发成功:" + JSON.stringify(res));
			// 	},
			// 	fail: function(err) {
			// 		// 转发失败
			// 		console.log("转发失败:" + JSON.stringify(err));
			// 	}
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		overflow-y: auto;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		background: #F7F7F7;
		padding: 50rpx;

		.code-plate-box {
			width: 100%;
			padding: 50rpx;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 80rpx;

			.user-head-box {
				flex-direction: column;
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 40rpx;
				color: #333333;

				image {
					width: 120rpx;
					height: 120rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		.code-box {
			width: 100%;

			image {
				width: 500rpx;
				height: 500rpx;
			}
		}

		.bottom-but-box {
			width: 100%;
			flex-direction: column;
			font-weight: bold;

			.share-code-but-box {
				button {
					padding: 20rpx 120rpx;
					background: #000;
					border: 1px solid black;
					border-radius: 15rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-bottom: 60rpx;
				}
			}

			.hold-code-but-box {
				background: rgba(128, 128, 128, 0);
				border: 1px solid #808080;
				padding: 0 120rpx;
				border-radius: 15rpx;
				font-size: 30rpx;
				margin-bottom: 60rpx;
				height: 116rpx;
				box-sizing: border-box;
				line-height: 116rpx;
			}
		}

		.code-image {
			width: 90%;
			padding: 50rpx 40rpx;
			height: 700rpx;
			border-radius: 15rpx;
			// background: #fff;
		}
	}
</style>
